//选择画芯素材
import React,{Component} from 'react';
import Header from '../common/header'
import Util from '../common/util'
import * as URLconstant from '../constant/URLconstant'
import {
    View,
    Text,
    Image,
    StyleSheet,
    Dimensions,
    TouchableOpacity,
    ScrollView,
    SafeAreaView,
    FlatList,
    Alert
} from 'react-native'
export default class selectMaterial extends Component{
    // 构造
    constructor(props) {
        super(props);
        // 初始状态
        this.state = {
            page:1,
            limit:10,
            goodsList:[],
            loaded:false,
            again:true,
            isOver:false,
            hasGoods:true
        };
    }


    async componentDidMount() {
        let {title,item_type} = this.props.route.params
        await this.setState({
            title:title,
            item_type:item_type
        })
        this.getMaterial()
    }

    getMaterial(){
        let url = URLconstant.GET_MATERIAL
        let datakey=[]
        datakey['item_type']=this.state.item_type
        datakey['page']=this.state.page
        datakey['limit']=this.state.limit
        Util.get(url,datakey,(datas)=>{
            if(datas.status==0){
                let again = true
                let isOver = false
                let newList = datas.data.goods
                let limit = this.state.limit
                let hasGoods = true
                let page = this.state.page
                if(page==1&&newList&&newList.length==0){
                    hasGoods=false
                }
                if(!newList||newList.length<limit){
                    again=false
                    isOver = true
                }
                let goodsList=this.state.goodsList;
                Array.prototype.push.apply(goodsList, newList);
                this.setState({
                    isOver:isOver,
                    goodsList:goodsList,
                    again:again,
                    loaded:true,
                    hasGoods:hasGoods
                })
            }
        },(err)=>{

        })
    }

    async onEndReached(){
        if(this.state.again){
            await this.setState({
                page:this.state.page+1
            })
            this.getMaterial()
        }
    }

    toSelectFrame(item){
        this.props.navigation.push("SelectFrame",{
            image_url:item.image_url,
            picLength:item.width,
        })
    }

    _renderRow=({ item })=>{
        return(
            <TouchableOpacity  style={styles.goods_item} onPress={()=>this.toSelectFrame(item)}>
                <Image
                    source={{uri:item.image_url?item.image_url:'http://cdn.img.ecduo.cn/ecduo/data/files/Uploads/picture/2019-12/201912061110297833.jpg'}}
                    resizeMode={'cover'}
                    style={{width:(Util.size.width-30)/2,height:(Util.size.width-30)/2}}
                />
                <View style={{paddingVertical:5,alignItems:'center'}}>
                    <Text style={{fontSize:14,color:"#333"}}>{item.title}</Text>
                </View>
            </TouchableOpacity>
        )
    }

    renderFooter(){
        return (
            <View style={{alignItems:'center',justifyContent:'center',paddingVertical:20,width:Util.size.width}}>
                <Text style={{fontSize:12,color:"#969696"}}>{this.state.isOver?"没有更多数据了":"正在加载中"}</Text>
            </View>
        )
    }

    render(){

        return(
            <SafeAreaView style={{flex:1,backgroundColor:"#fff"}}>
                <Header navigation={this.props.navigation} title={this.state.title}/>
                {
                    this.state.loaded==false?
                        <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
                            {Util.loading()}
                        </View>:
                        <View style={{flex:1,}}>
                            {
                                this.state.hasGoods?
                                    <FlatList
                                        style={{paddingTop:10}}
                                        numColumns={2}
                                        columnWrapperStyle={styles.goods_list_item}
                                        data={this.state.goodsList}
                                        renderItem={this._renderRow}
                                        onEndReached={this.onEndReached.bind(this)}
                                        keyExtractor={item => item.goods_id}
                                    />:
                                    <View style={{flex:1,alignItems:"center",justifyContent:"center"}}>
                                        <Text>该分类没有素材</Text>
                                    </View>
                            }
                        </View>

                }
            </SafeAreaView>
        )
    }
}
var styles = StyleSheet.create({
    goods_list_item:{
        justifyContent:'space-between',
        paddingHorizontal:10
    },
    goods_item:{
        width:(Util.size.width-30)/2,
        marginBottom:10
    }
})